<script setup>
import { ref, defineProps } from "vue";

const props = defineProps({
  data: Object,
  loading: Boolean,
  type: String,
});

// 后端返回的过期时间字符串
const expirationTimeStr = props.data.expirationTime;
// 将过期时间字符串解析为Date对象
const expirationTime = new Date(expirationTimeStr);
// 获取当前时间
const currentTime = new Date();
// 计算两个时间点的时间戳（毫秒）
const expirationTimestamp = expirationTime.getTime();
const currentTimestamp = currentTime.getTime();
// 计算时间差（毫秒）
const timeDifferenceMs = expirationTimestamp - currentTimestamp;
// 将时间差转换为分钟
const timeDifferenceMinutes = timeDifferenceMs / (1000 * 60);
console.log("时间差（分钟）：", timeDifferenceMinutes);

const time = ref(timeDifferenceMinutes * 60 * 1000);

const calculateTimeDifference = (targetTime) => {
  const currentTime = new Date(); // 获取当前时间
  const targetDate = new Date(targetTime); // 将目标时间字符串转换为日期对象
  const timeDifference = targetDate - currentTime; // 计算时间差（以秒为单位）
  return Math.floor(timeDifference); // 返回时间差的整数值
};

// 订单状态: 0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退款 6-已过期
const getTypeText = () => {
  const status = props.data?.orderStatus;
  if (status === 0) {
    return {
      text: "待支付",
      color: "#ED6316",
    };
  }
  if (status === 1) {
    return {
      text: "已完成",
      color: "#999999",
    };
  }
  if (status === 2) {
    return {
      text: "已取消",
      color: "#999999",
    };
  }
};
// 倒计时结束触发
function handelfinish() {
  console.log(132);
}
</script>

<template>
  <div class="type">
    <template v-if="!loading">
      <div class="type_header">
        <img
          v-if="props.data?.orderStatus === 0"
          src="@/assets/images/icons/noPay.png"
          alt=""
        />
        <img
          v-else-if="props.data?.orderStatus === 2"
          src="@/assets/images/icons/close.png"
          alt=""
        />
        <img
          v-else-if="props.data?.orderStatus === 1"
          src="@/assets/images/icons/complete.png"
          alt=""
        />
        <!-- <img v-else-if="props.data?.orderStatus === 3 || props.data?.orderStatus === 6" src="@/assets/images/icons/close.png" alt="">
        <img v-else-if="props.data?.orderStatus === 4" src="@/assets/images/icons/refunding.png" alt="">
        <img v-else-if="props.data?.orderStatus === 5" src="@/assets/images/icons/refunding2.png" alt=""> -->
        <span
          class="type_text"
          :style="{ color: getTypeText()?.color }"
          v-if="type === 'panda'"
        >
          <!-- {{ getTypeText()?.text }} -->
          {{
            data.orderStatus == 1
              ? data?.isActivate == 0
                ? "未激活"
                : "已激活"
              : getTypeText()?.text
          }}
        </span>
        <span class="type_text" :style="{ color: getTypeText()?.color }" v-else>
          {{ getTypeText()?.text }}
        </span>
      </div>

      <van-count-down
        v-if="
          props.data?.status === '0' ||
          (props.data?.status === 0 && data.expirationTime)
        "
        :time="calculateTimeDifference(data.expirationTime)"
        @finish="handelfinish"
      >
        <template #default="timeData">
          <span class="time">支付剩余时间：</span>
          <span class="time">{{ timeData.minutes }}</span>
          <span class="time">分</span>
          <span class="time">{{ timeData.seconds }}</span>
          <span class="time">秒</span>
        </template>
      </van-count-down>

      <template v-if="type === 'scenic'">
        <span v-if="props.data?.status == '1'" class="time-use"
          >请前往景区核销使用</span
        >
      </template>
      <template v-if="type === 'hotel'">
        <span v-if="props.data?.status == '1'" class="time-use"
          >需至少提前一天电话询问商家预约</span
        >
      </template>
      <template v-if="type === 'hotPot'">
        <span v-if="props.data?.status == '1'" class="time-use">
          请前往线下门店核销使用
        </span>
      </template>
      <img class="bg_img" src="@/assets/images/index/bg.png" alt="" />
    </template>
    <van-skeleton v-else>
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <div :style="{ flex: 1 }">
            <van-skeleton-paragraph row-width="30%" />
            <van-skeleton-paragraph row-width="60%" />
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-skeleton) {
  padding: 0;
}
.type {
  position: relative;
  z-index: 1;
  padding: 3.5rem 1.5rem 0.5rem 1.5rem;
  height: 10rem;
  box-sizing: border-box;

  .type_header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;

    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-right: 0.8rem;
    }

    .type_text {
      font-size: 2.4rem;
      font-weight: normal;
    }
  }

  .time {
    font-size: 1.4rem;
    color: #999999;
    line-height: 1.6rem;
  }

  .time-use {
    color: #ed6316;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .bg_img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
  }
}
</style>